<script setup>
import {shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {RULE} from "../../../const";
import {updateApi} from "../../../api/menu.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";

// 获取当前菜单记录
let menu = JSON.parse(sessionStorage.getItem('menu'));

/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = shallowRef([
  {'label': '菜单名称', 'prop': 'name', 'required': true},
  {'label': '菜单图标', 'prop': 'icon', 'type': 'icon', 'required': true},
  {'label': '菜单排序', 'prop': 'sort', 'type': 'number', 'required': true},
  {'label': '菜单描述', 'prop': 'info', 'type': 'textarea'},
]);
let data = shallowReactive(menu);
let rules = {
  'info': RULE.COMMON_INFO,
};

/* ==================== 修改成功后 ==================== */
function updateSuccess() {
    router.push('/Menu');
}

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '用户管理', 'url': '/Menu'},
    {'icon': 'User', 'label': '菜单列表（一级菜单）', 'url': '/Menu'},
    {'icon': 'Edit', 'label': '修改菜单'},
  ]"/>

  <el-divider/>

  <el-card class="menu-update-card" header="修改菜单信息">
    <my-form type="update"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="updateSuccess"/>
  </el-card>

</template>

<style scoped lang="scss">
.menu-update-card {
  width: 60%;
  margin: auto;
}
</style>